<template>
  <div id="companyInfo">
    <div class="form-box">
      <el-form :model="companyInfoData" :rules="companyInfoRules" ref="companyform" label-width="120px">
        <el-row>
          <el-col :span="12" calss="form-left">
            <el-form-item label="企业姓名：" prop="company_name">
              <el-input v-model="companyInfoData.company_name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="联系人：" prop="contact_person">
              <el-input v-model="companyInfoData.contact_person" style="width: 100%;" size="small"></el-input>
            </el-form-item>
            <el-form-item label="固定电话：" prop="desk_phone" required>
              <el-input v-model="companyInfoData.desk_phone" style="width: 100%;" size="small"></el-input>
            </el-form-item>
            <el-form-item label="公司地址：" prop="company_address">
              <el-input v-model="companyInfoData.company_address" style="width: 100%;" size="small"></el-input>
            </el-form-item>
            <el-form-item label="公司网址：" prop="company_website">
              <el-input v-model="companyInfoData.company_website" style="width: 100%;" size="small"></el-input>
            </el-form-item>
            <el-form-item label="公司规模：" prop="company_size" required>
              <el-select v-model="companyInfoData.company_size" size="small" style="width: 100%;">
                <el-option v-for="(optionitem,index) in companySizeList" :key="index" :label="optionitem.label"
                           :value="optionitem.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" calss="form-right">
            <el-form-item label="联系电话：" prop="tel" required>
              <el-input v-model="companyInfoData.tel" size="small"></el-input>
            </el-form-item>
            <el-form-item label="所属行业：" prop="industry_name">
              <el-select v-model="companyInfoData.industry_name" placeholder="请选择" style="width: 100%;" size="small">
                <el-option v-for="(item, index) in industryDataList" :key="index" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司类型：" prop="company_type" required>
              <el-select v-model="companyInfoData.company_type" placeholder="请选择" style="width: 100%;" size="small">
                <el-option v-for="(item, index) in companyTypeList" :key="index" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司法人：" prop="legal_person">
              <el-input v-model="companyInfoData.legal_person" style="width: 100%;" size="small"></el-input>
            </el-form-item>
            <el-form-item label="公司邮箱：" prop="email">
              <el-input v-model="companyInfoData.email" style="width: 100%;" size="small"></el-input>
            </el-form-item>
            <el-form-item label="营业执照：" prop="business_license">
              <el-input v-model="companyInfoData.business_license" style="width: 100%;" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="宣传语：" label-width="120px" prop="company_publicity">
          <el-input v-model="companyInfoData.company_publicity" size="small" placeholder="长度在50个字符以内"></el-input>
        </el-form-item>
        <el-form-item label="公司简介：" label-width="120px" prop="company_profile">
          <el-input type="textarea" :rows="5" v-model="companyInfoData.company_profile" size="small"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="inner-center">
      <el-button type="success" size="large" @click="checkCompanyInfo">保存</el-button>
      <el-button @click="Cancel" size="large">取消</el-button>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { commonNotify } from '../../assets/js/common.js'
  import DbrowForm from '@/components/common/DbrowForm'
  import industryList from '../../assets/industryList.json'
  import UploadImageCard from '@/components/common/UploadImageCard'

  export default {
    name: 'companyInfo',
    data () {
      var checkTel = (rule, value, callback) => {
        value = value.replace(/^\s+|\s+$/g, '')
        let formatMobilePhone = /^1[3|4|5|7|8]\d{9}$/
        let formatPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/
        if (value === '') {
          callback(new Error('请填写电话号码'))
        } else if (!(formatPhone.test(value) || formatMobilePhone.test(value))) {
          callback(new Error('电话号码格式错误'))
        } else {
          callback()
        }
      }
      var checkEmail = (rule, value, callback) => {
        if (value === undefined) {
          value = ''
        }
        value = value.replace(/^\s+|\s+$/g, '')
        let formatEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (value === '') {
          callback()
        } else if (!formatEmail.test(value)) {
          callback(new Error('邮箱格式错误！'))
        } else {
          callback()
        }
      }
      return {
        companyInfoData: {
          company_name: '',//企业姓名
          business_license: '',//营业执照
          contact_person: '',//联系人
          legal_person: '',//公司法人
          tel: '',//联系电话
          desk_phone: '',//固定电话
          email: '',//邮箱
          industry_name: '',//所属行业
          company_type: 0,//公司类型
          company_website: '',//公司网址
          company_address: '',//公司地址
          company_profile: '',//公司简介
          company_size: 0,//公司规模
        },
        companyInfoRules: {
          company_name: [
            {required: true, message: '请填写公司姓名', trigger: 'blur'},
            {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
          ],
          business_license: [
            {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
          ],
          contact_person: [
            {required: true, message: '请填写联系人', trigger: 'blur'},
            {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
          ],
          legal_person: [,
            {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
          ],
          tel: [
            {validator: checkTel, trigger: 'blur'}
          ],
          desk_phone: [
            {required: true, message: '请填写固定电话', trigger: 'blur'}
          ],
          email: [
            {validator: checkEmail, trigger: 'blur'}
          ],
          // company_size: [
          // 	{ required: true, message: '请填写公司规模', trigger: 'change' }
          // ],
          industry_name: [
            {required: true, message: '请填写所属行业', trigger: 'blur'},
            {min: 1, max: 120, message: '长度在 1 到 120 个字符', trigger: 'blur'}
          ],
          company_website: [
            {required: true, message: '请填写公司网址', trigger: 'blur'},
            {min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur'}
          ],
          company_address: [
            {required: true, message: '请填写公司地址', trigger: 'blur'},
            {min: 1, max: 120, message: '长度在 1 到 120 个字符', trigger: 'blur'}
          ],
          company_publicity: [
            {required: true, message: '请填写公司宣传语', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          company_profile: [
            {required: true, message: '请填写公司简介', trigger: 'blur'},
            {min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur'}
          ]
        },
        companyTypeList: [],
        companySizeList: [],
        industryDataList: industryList,
        uploadConfig: {
          type: 'COMPANY_PORTRAIT_ADD',
          width: '150px',
          height: '180px',
          tip: '<i style="color:red">* </i>请上传JPG或PNG格式的照片'
        },

      }
    },
    created () {
      this.createComponent()
    },
    mounted () {
      this.updateComponent()
    },
    methods: {
      createComponent () {
        let _this = this
        this.companySizeList = getStaticMapList('company_size')
        this.companyTypeList = getStaticMapList('company_type')
      },
      updateComponent () {
        let _this = this
        postDataToServer('COMPANY_GET').then((data) => {
          if (data.status === 0) {
            _this.companyInfoData = data.data_list
          }
        })
      },
      Cancel () {
        this.$emit('returnState', false)
      },
      checkCompanyInfo () {
        let _this = this
        this.$refs['companyform'].validate((valid) => {
          if (valid) {
            _this.saveCompanyInfo()
          } else {
            _this.$message({
              message: '存在数据填写错误',
              type: 'error'
            })
            return
          }
        })
      },
      saveCompanyInfo () {
        let _this = this
        postDataToServer('COMPANY_EDIT', this.companyInfoData).then((data) => {
          commonNotify(_this, data.status, 'SAVE')
          if (data.status === 0) {
            _this.$emit('returnState', true)
          }
        })
      }
    },
    components: {
      DbrowForm,
      UploadImageCard
    }
  }
</script>

<style scoped>
  .title {
    border-bottom: 1px solid #F2F2F2;
    padding: 0.5em;
    color: #575B6A;
    font-size: 1.3em;
  }

  .form-box {
    text-align: left;
    padding-top: 1em;
    /*background: #fafafa;*/
  }

  .inner-center {
    text-align: center;
  }
</style>
